<nav class="bootstrap-grey">
  <div class="nav-wrapper">
    <a href="/" class="brand-logo">
      <img src="/img/wellread-logo.png" style="height:60px;">
    </a>
    <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li>
        <form method="GET" action="/books/search">
          <div class="input-field">
            <input id="search" type="search" placeholder="Search Google Books" name="search" required>
            <label class="label-icon" for="search"><i class="material-icons">search</i></label>
            <!-- issue with material-icons 'close' interferring with user input text
            <!--i class="material-icons">close</i-->
          </div>
        </form>
      </li>
      <li><a href="/">Home</a></li>
      <% if (!user) { %>
        <li><a href="/auth/login">Login</a></li>
        <li><a href="/auth/signup">Signup</a></li>
        <% } else { %>
          <!--li>Hi, <%= user.firstname %>!</li-->
          <% if (user.admin) { %>
            <li><a href="/profile/admin">Admin</a></li>
          <% } %>
          <% if (user.githubId) { %>
            <li><a href="/profile/repos">View Repos</a></li>
          <% } %>
          <li><a href="/books/">Books</a></li> 
          <li><a href="/books/search">Search</a></li>
          <li><a href="/profile"><%= user.firstname %></a></li>
          <li><a href="/auth/logout">Logout</a></li>
        <% } %>
    </ul>
  </div>
</nav>

<ul class="sidenav" id="mobile-demo">
  <% if(!user) { %>
    <li><a href="/auth/login">Log In</a></li>
    <li><a href="/auth/signup">Sign Up</a></li>
  <% } else { %>
    <% if(user.admin) { %>
      <li><a href="/profile/admin">Admin</a></li>
    <% } %>
    <% if (user.githubId) { %>
      <li><a href="/profile/repos">View Repos</a></li>
    <% } %>
    <li><a href="/profile">Profile</a></li>
    <li><a href="/auth/logout">Logout</a></li>
  <% } %>
</ul>
